<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>校园跑腿</title>
    <meta name="description" content="校园跑腿"/>
    <meta name="keywords" content="校园跑腿"/>
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <link rel="stylesheet" href="/css/amazeui.min.css"/>
    <link rel="stylesheet" href="/css/style.css"/>
    <script type="text/javascript" src="/js/jquery.min.js"></script>
    <script type="text/javascript" src="/js/amazeui.min.js"></script>
    <script type="text/javascript" src="/js/application.js"></script>
    <style>
        body {
            background-color: #FCFCFC;
        }

        dl,
        dd {
            margin: 0;
        }

        #box {
            width: 850px;
            background: rgba(255, 255, 255, 0.8);
            box-shadow: 0 0 10px rgba(73,66,66,.1);
            margin: 50px auto;
            border: 1px solid #E5E5E5;
        }

        #box dl {
            height: 50px;
            line-height: 50px;
            border-bottom: 1px dashed #dadada;
            margin: 0 20px;
        }

        #box dt {
            float: left;
            color: #8a8a8a;
        }

        #box dd {
            float: left;
            color: #252525;
            margin: 0 10px;
            font-size: 14px;
            cursor: pointer;
        }

        #box dd.active {
            color: #c4284d;
            font-weight: bold;
        }

        #box dl.select {
            background: #efefef;
            margin: 0;
            padding: 0 20px;
        }

        #box dl.select dd{
            border: 1px solid #c4284d;
            height: 25px;
            line-height: 25px;
            margin-top: 13px;
            padding: 0 2px 0 10px;
            border-radius: 3px;background-color: #fff;
        }
        #box dl.select dd span{
            width: 20px;
            height: 20px;
            display: inline-block;
            text-align: center;
            line-height: 20px;
            background: #c4284d;
            color: #fff;
            margin-left: 10px;
            cursor: pointer;border-radius: 5px;
        }
        .popup-container {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background-color: rgba(255, 255, 255, 0.8);
            backdrop-filter: blur(10px);
            z-index: 9999;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 100%;
            height: 100%;
        }
        .popup-container {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background-color: rgba(255, 255, 255, 0.5);
            backdrop-filter: blur(10px);
            z-index: 9999;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 100%;
            height: 100%;
        }
        .field-container {
            margin-bottom: 10px;
            box-shadow: 0 0 10px rgba(255, 255, 255, 0.8);
        }

        .field-container label {
            display: block;
            font-weight: bold;
        }

        .field-container input {
            width: 100%;
            padding: 8px;
            border: 1px solid #ccc;
            border-radius: 4px;
        }
        .confirm-button {
            background-color: #ccc;
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 4px;
            cursor: pointer;
        }

        .confirm-button:hover {
            background-color: #6b6969;
        }

        .confirm-button:focus {
            outline: none;
        }
        .close-button {
            background-color: #ccc;
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 4px;
            cursor: pointer;
        }

        .close-button:hover {
            background-color: #6b6969;
        }

        .close-button:focus {
            outline: none;
        }
        .success-message {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            padding: 10px 20px;
            background-color: rgba(76, 175, 80, 0.8);
            color: white;
            border-radius: 4px;
            opacity: 1;
            transition: opacity 1s ease-in-out;
        }

        .success-message.fade-out {
            opacity: 0;
        }
    </style>
</head>
<body>
<form>
    <div style="width: 100%;margin: 0" id="box">
        <dl>
            <dt>类型:</dt>
            <dd>取快递</dd>
            <dd>求带饭</dd>
            <dd>求帮忙</dd>
            <dd>求陪跑</dd>
        </dl>
        <dl>
            <dt>金额:</dt>
            <dd>0-1元</dd>
            <dd>2-3元</dd>
            <dd>4-5元</dd>
            <dd>6-7元</dd>
            <dd>7元以上</dd>
        </dl>
        <dl>
            <dt>截至时间:</dt>
            <dd>10分钟以上</dd>
            <dd>20分钟以上</dd>
            <dd>30分钟以上</dd>
            <dd>40分钟以上</dd>
            <dd>50分钟以上</dd>
            <dd>60分钟以上</dd>
        </dl>
        <dl class="select" style="border-bottom-width: 0;width: 70%;display: inline-block">
            <dt>已选条件:</dt>
        </dl>
        <div style="display: inline-block;width: 29%;"><input style="margin-top:-40px;height: 50px;width: 100%" type="submit" value="搜索"></div>
        <script>
            // 获取格式化后的日期时间字符串
            function getFormattedDateTime(dateObj) {
                var year = dateObj.getFullYear();
                var month = addLeadingZero(dateObj.getMonth() + 1);
                var day = addLeadingZero(dateObj.getDate());
                var hours = addLeadingZero(dateObj.getHours());
                var minutes = addLeadingZero(dateObj.getMinutes());
                var seconds = addLeadingZero(dateObj.getSeconds());

                return year + "-" + month + "-" + day + " " + hours + ":" + minutes + ":" + seconds;
            }

            // 在个位数前添加前导零
            function addLeadingZero(number) {
                return number < 10 ? "0" + number : number;
            }
            function getUserInfo(event,href) {
                href = href.toString()
                event.preventDefault();
                var orderid = null;
                if (href.includes('order')) {
                    var lastIndex = href.lastIndexOf("/");
                    var result = href.substr(lastIndex + 1);
                    orderid = result.split('&')[1];
                    result= result.split('&')[0];
                } else {
                    orderid = result.split('&')[1];
                    result= result.split('&')[0];
                }

                var xhr = new XMLHttpRequest();
                xhr.open("POST", "/user/get_userInfo?UserID="+result, true);
                xhr.onreadystatechange = function () {
                    if (xhr.readyState === 4 && xhr.status === 200) {
                        var user = JSON.parse(xhr.responseText);

                        var popupContainer = document.createElement('div');
                        popupContainer.classList.add('popup-container');

                        var form = document.createElement('form');
                        form.classList.add('popup-form');

                        var closeButton = document.createElement('button');
                        closeButton.classList.add('close-button');
                        closeButton.innerHTML = '×';

                        var confirmButton = document.createElement('button');
                        confirmButton.classList.add('confirm-button');
                        confirmButton.innerHTML = '确认接单';

                        form.appendChild(closeButton);
                        form.appendChild(confirmButton);

                        var fieldConfig = [
                            { label: '账号', property: 'userId' },
                            { label: '姓名', property: 'userName' },
                            { label: '电话号码', property: 'phoneNumber' }
                        ];

                        fieldConfig.forEach(function(field) {
                            var fieldContainer = document.createElement('div');
                            fieldContainer.classList.add('field-container');

                            var fieldLabel = document.createElement('label');
                            fieldLabel.textContent = field.label;

                            var fieldValue = document.createElement('input');
                            fieldValue.setAttribute('type', 'text');
                            fieldValue.setAttribute('readonly', 'true');
                            fieldValue.value = user[field.property];

                            fieldContainer.appendChild(fieldLabel);
                            fieldContainer.appendChild(fieldValue);

                            form.appendChild(fieldContainer);
                        });





                        popupContainer.appendChild(form);

                        document.body.appendChild(popupContainer);

                        closeButton.addEventListener('click', function() {
                            document.body.removeChild(popupContainer);
                        });
                        confirmButton.addEventListener('click', function(event) {
                            event.preventDefault();
                            // 创建接单成功消息框
                            var successMessage = document.createElement('div');
                            successMessage.textContent = '接单成功！';
                            successMessage.classList.add('success-message');
                            popupContainer.appendChild(successMessage);


                            var orderToDataBase = {
                                'OrderID':orderid
                            }
                            var xhr = new XMLHttpRequest();
                            xhr.open('POST', '/order/submit_order_to_dataBase', false);
                            xhr.setRequestHeader('Content-Type', 'application/json');
                            xhr.onreadystatechange = function() {
                                if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
                                    // 请求成功处理逻辑
                                    console.log('提交成功');
                                } else {
                                    // 请求失败处理逻辑
                                    console.log('提交失败');
                                }
                            };
                            selectedContent = []
                            xhr.send(JSON.stringify(orderToDataBase));

                            // 添加 CSS 类以实现渐隐效果
                            setTimeout(function() {
                                successMessage.classList.add('fade-out');
                            }, 1000);

                            // 延迟一段时间后跳转到指定页面
                            setTimeout(function() {
                                window.location.href = '/user/run_pool';
                            }, 2000); // 这里设置了2秒延迟，以便等待渐隐效果完成
                        });

                    }
                };
                xhr.send();
            }
            function updateDOM(orderFormList) {
                var introContainer = document.getElementById('normal');
                introContainer.innerHTML = ''; // 清空容器中原有的内容

                for (var i = 0; i < orderFormList.length; i++) {
                    var orderForm = orderFormList[i];
                    // 转换 billTime
                    var billTimeStr = orderForm.billTime;
                    var billTimeObj = new Date(billTimeStr);
                    var formattedBillTime = getFormattedDateTime(billTimeObj);
                    orderForm.billTime = formattedBillTime;

                    // 转换 deadLine
                    var deadLineStr = orderForm.deadLine;
                    var deadLineObj = new Date(deadLineStr);
                    var formattedDeadLine = getFormattedDateTime(deadLineObj);
                    orderForm.deadLine = formattedDeadLine;

                    var div = document.createElement('div');
                    div.className = 'am-g am-intro-bd';

                    var a = document.createElement('a');
                    a.href = '#';

                    var introLeft = document.createElement('div');
                    introLeft.className = 'am-intro-left am-u-sm-3';

                    var imgLeft = document.createElement('img');
                    imgLeft.src = '/img/boy.png';
                    introLeft.appendChild(imgLeft);

                    var introRight = document.createElement('div');
                    introRight.className = 'am-intro-right am-u-sm-9';

                    var textDiv1 = document.createElement('div');
                    textDiv1.className = 'text';

                    var usernameSpan = document.createElement('span');
                    usernameSpan.style.float = 'left';
                    usernameSpan.style.color = 'black';
                    usernameSpan.style.fontSize = '23px';
                    textDiv1.appendChild(usernameSpan);

                    var usernamei=document.createElement('i');
                    usernamei.textContent = orderForm.billUser.userName;
                    usernameSpan.appendChild(usernamei);

                    var statusSpan = document.createElement('span');
                    statusSpan.className = 'fr black';
                    statusSpan.style.marginRight = '2%';
                    textDiv1.appendChild(statusSpan);

                    var statusi = document.createElement('i');
                    statusi.textContent = orderForm.orderStatus;
                    statusSpan.appendChild(statusi)

                    introRight.appendChild(textDiv1);

                    var textDiv2 = document.createElement('div');
                    textDiv2.className = 'text';

                    var deadlineSpan = document.createElement('span');
                    deadlineSpan.className = 'fl';
                    textDiv2.appendChild(deadlineSpan);

                    var deadlinei = document.createElement('i');
                    deadlinei.textContent = orderForm.deadLine;
                    deadlineSpan.appendChild(deadlinei)

                    introRight.appendChild(textDiv2);

                    var demandP = document.createElement('p');
                    demandP.textContent = orderForm.demand;
                    introRight.appendChild(demandP);

                    var textDiv3 = document.createElement('div');
                    textDiv3.className = 'text';

                    var priceSpan1 = document.createElement('span');
                    priceSpan1.className = 'fr';
                    textDiv3.appendChild(priceSpan1)

                    var iprice1 = document.createElement('i');
                    iprice1.textContent = '赚';
                    priceSpan1.appendChild(iprice1);

                    var iprice2 = document.createElement('i');
                    iprice2.className = 'price';
                    iprice2.textContent = orderForm.price;
                    priceSpan1.appendChild(iprice2);

                    var iprice3 = document.createElement('i');
                    iprice3.textContent = '元';
                    priceSpan1.appendChild(iprice3);

                    introRight.appendChild(textDiv3);

                    var textDiv4 = document.createElement('div');
                    textDiv4.className = 'text';

                    var actionSpan = document.createElement('span');
                    actionSpan.className = 'fr';

                    var aOrder = document.createElement('a');
                    aOrder.style.borderRadius = '10px';
                    aOrder.style.letterSpacing = '8px';
                    aOrder.style.fontSize = '22px';
                    aOrder.style.height = '35px';
                    aOrder.style.width = '100px';
                    aOrder.style.background = '#ff6767';
                    aOrder.style.color = 'white';
                    aOrder.className = 'fr';
                    aOrder.href = orderForm.billUser.userId+'&'+orderForm.orderId;
                    aOrder.style.textAlign = "center";
                    aOrder.textContent = '接单';

                    (function(href) {
                        aOrder.addEventListener('click', function(event) {
                            getUserInfo(event, this.href);
                        });
                    })(orderForm.billUser.userId);

                    actionSpan.appendChild(aOrder);
                    textDiv4.appendChild(actionSpan);
                    introRight.appendChild(textDiv4);

                    a.appendChild(introLeft);
                    a.appendChild(introRight);

                    div.appendChild(a);

                    introContainer.appendChild(div);
                }
            }

        </script>
        <script>
            var searchButton = document.querySelector('input[type="submit"]');
            searchButton.addEventListener('click', handleSearch);
            function handleSearch(event) {
                var jsonData = {};

                event.preventDefault(); // 阻止表单默认提交行为

                // 获取所有class为"activate"的元素
                var i = 0;
                var selectedContent = []
                var elements = document.getElementsByClassName("active");
                for (i = 0; i < elements.length; i++) {
                    var text = elements[i].textContent;
                    selectedContent.push(text);
                }

                for (i = 0; i < selectedContent.length; i++) {
                    var property = '';
                    switch (selectedContent[i]) {
                        case '0-1元':
                        case '2-3元':
                        case '4-5元':
                        case '6-7元':
                        case '7元以上':
                            property = 'amountRestrictions';
                            break;
                        case '取快递':
                        case '求带饭':
                        case '求陪跑':
                        case '求帮忙':
                            property = 'typeRestrictions';
                            break;
                        case '10分钟以上':
                        case '20分钟以上':
                        case '30分钟以上':
                        case '40分钟以上':
                        case '50分钟以上':
                        case '60分钟以上':
                            property = 'deadlineRestrictions';
                            break;
                        default:
                            property = 'UnknownFormat'
                            break;
                    }
                    jsonData[property] = selectedContent[i];
                }
                var xhr = new XMLHttpRequest();
                xhr.open('POST', '/order/display_orders_by_limit', false);
                xhr.setRequestHeader('Content-Type', 'application/json');
                xhr.onreadystatechange = function() {
                    if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
                        // 请求成功处理逻辑
                        var neworderFormList = JSON.parse(xhr.responseText);

                        updateDOM(neworderFormList);
                    } else {
                        // 请求失败处理逻辑
                        console.log('提交失败');
                    }
                };
                selectedContent = []
                xhr.send(JSON.stringify(jsonData));
            }
        </script>

    </div>
</form>
<script>
    var selectedContent = []; // 修改为数组保存选择的内容
    var dls = document.querySelectorAll('dl:not(.select)');
    var selected = document.querySelector('.select');

    for (var i = 0; i < dls.length; i++) {
        dls[i].mark = false;
        select(i);
    }
    function select(n) {
        var dds = dls[n].querySelectorAll('dd');
        var prev = null;
        var dd = null;

        for (var i = 0; i < dds.length; i++) {
            dds[i].onclick = function () {
                if (prev) {
                    prev.className = '';
                }

                this.className = 'active';
                prev = this;

                var parent = this.parentNode;
                if (!parent.mark) {
                    dd = document.createElement('dd');
                    dd.innerHTML = this.innerHTML;
                    selected.appendChild(dd);
                    parent.mark = true;
                    selectedContent.push(this.innerHTML); // 将选择的内容添加到数组中
                } else {
                    dd.innerHTML = this.innerHTML;
                    selectedContent[selectedContent.length - 1] = this.innerHTML; // 更新选择的内容
                }

                var span = document.createElement('span');
                var This = this;
                span.innerHTML = 'X';
                span.onclick = function () {
                    selected.removeChild(dd);
                    This.className = '';
                    parent.mark = false;
                    var index = selectedContent.indexOf(This.innerHTML);
                    if (index > -1) {
                        selectedContent.splice(index, 1); // 从数组中移除选择的内容
                    }
                };
                dd.appendChild(span);
            };
        }
    }
</script>
<!--列表-->
<div data-am-widget="intro" class="am-intro am-cf am-intro-default" id="normal">
    <div class="am-g am-intro-bd" th:each="orderForm : ${orderFormList}">
        <!-- 使用 Thymeleaf 的循环指令来遍历用户列表数据 -->
        <a href="#">
            <div class="am-intro-left am-u-sm-3">
                <img src="/img/boy.png"/>
            </div>
            <div class="am-intro-right am-u-sm-9">
                <div class="text">
                    <span style="float: left;color: black;font-size: 23px"><i th:text="${orderForm.getBillUser().getUserName()}"></i></span>
                    <span class="fr black" style="margin-right: 2%"><i th:text="${orderForm.getOrderStatus()}"></i></span>
                </div>
                <div class="text">
                    <span class="fl"><i th:text="${orderForm.getDeadLine()}"></i></span>
                </div>
                <p th:text="${orderForm.getDemand()}"></p>
                <div class="text">
                    <span class="fr">
                        <i>赚</i>
                        <i class="price" th:text="${orderForm.price}"></i>
                        <i>元</i></span>
                </div>
                <div class="text">
                    <span class="fr">
                        <a style="border-radius:10px;letter-spacing: 8px;font-size:22px;height: 35px;width:100px;background: #ff6767;color: white" class="fr" th:href="${orderForm.getBillUser().getUserId()+'&'+orderForm.getOrderId()}" onclick="getUserInfo(event,this.href)">&nbsp;接&nbsp;单</a>
                    </span>
                </div>
            </div>
        </a>
    </div>
</div>

<div style="top: 75%" class="communityPage-publish-btn cmn-theme-bgcolor" id="communityPage-publish-btn">
    <a id="down_order" href="/order/add_order?type_demand=求帮忙" style="color: white" >下单</a>
</div>

<div class="h50"></div>
<div style="height: 75px" data-am-widget="navbar" class="am-navbar am-cf am-navbar-default footer  am-no-layout" id="tab1">

    <ul class="am-navbar-nav am-cf am-avg-sm-4">
        <li>
            <a href="/user/homepage" class="">
                <span class=""><img style="height: 55px; width: 50px" src="/img/nav.png"></span>
                <span class="am-navbar-label">首页</span>
            </a>
        </li>
        <li>
            <a href="/user/run_pool" class="">
                <span class=""><img style="height: 55px; width: 50px" src="/img/nav1s.png"></span>
                <span class="am-navbar-label">跑腿池</span>
            </a>
        </li>
        <li>
            <a href="/user/evaluate" class="">
                <span class=""><img style="height: 55px; width: 50px" src="/img/nav2.png"></span>
                <span class="am-navbar-label">评价</span>
            </a>
        </li>
        <li>
            <a href="/user/mypage" class="">
                <span class=""><img style="height: 55px; width: 50px" src="/img/nav3.png"></span>
                <span class="am-navbar-label">我的</span>
            </a>
        </li>

    </ul></div>

</body>
</html>
